<template>
  <div>
    <header class="">
      <div class="navbar navbar-default visible-xs">
        <button type="button" class="navbar-toggle collapsed">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="/" class="navbar-brand">在线视频教育平台</a>
      </div>
      <nav class="sidebar">
        <div class="navbar-collapse" id="navbar-collapse">
          <div class="site-header hidden-xs">
              <a class="site-brand" href="/" title="">
                <img class="img-responsive site-logo" alt="" src="../assets/assets_2/images/mashup-logo.svg">
                在线视频教育平台
              </a>
            <p>
              课程分类
            </p>
          </div>
            <ul class="nav">
              <li><a href="/" title="">首页</a></li>
              <li>     
              <!-- <a href="/upload" title="上传课程">上传课程</a> -->
              <router-link to='/upload'>上传课程</router-link></li>
              <li>
                <router-link to='/order'>我的订单</router-link>
              </li>
              <li>
                <router-link to='/client'>我的客服</router-link>
              </li>
              <li><a href="./components.html" title="">Components</a></li>
            </ul>
          <div>     
          <div v-if="username==''">
              <router-link to='/login'>登录</router-link>/<router-link to='/register'>注册</router-link>

          </div>
          <div v-else >
              欢迎您：{{ username }}  &nbsp;&nbsp; <a href="#" @click="logout">登出</a>
  
          </div>

          <br /><br />
          <!-- 购物车 -->
          <Badge :count="total" >

            <div class="text-center">

              <a href="/cart">购物车</a>

            </div>
          </Badge>

          <br /><br />
          <!-- 检索功能 -->
          <p>
            <Search @search="search" showSearchButton v-model="text" ></Search>

          </p>
          <!--在线人数统计-->
          在线人数:{{ online }}
          </div>
        </div> 
      </nav> 
    </header>       
  </div>
</template>


 
<script>

export default {
  data () {
    return {
      msg: "这是一个变量",
      username:'',
      text:'',
      // 在线人数
      online:0,
      // 定义定时器
      timer:''
    }
  },
  //接收参数
  props:['total'],
  // 清楚已经失效的定时器
  beforeDestroy() {
    clearInterval(this.timer);

  },
  mounted:function(){
      // 利用定时器进行轮询单位 毫秒
      this.timer = setInterval(this.getonline,3000)



      // 在线人数
      this.axios.get('http://172.16.18.70:8000/getonline/').then((result) => {

            
        console.log(result);
        // 赋值
        this.onlines = result.data.onlines;
      });

      //接收参数
      var sina_id = this.$route.query.sina_id;
      console.log(sina_id);
      if(sina_id){
        //自动登录
        localStorage.setItem('username',sina_id);
        localStorage.setItem('uid',this.$route.query.uid);
        //将token加入storage
        localStorage.setItem('token',this.$route.query.token);
      }


      //判断用户是否登录
      var uname = localStorage.getItem('username');

      console.log(uname);

      if(uname==null){

         //赋值操作
      this.username = '';
      console.log(uname);

      }else{

        //赋值操作
      this.username = uname;
      console.log(uname);

      }

      

},
  methods:{
    // 定义获取在线人数方法
    getonline(){
      // this.online++;
      // 在线人数
      this.axios.get('http://172.16.18.70:8000/getonline/').then((result) => {

            
        console.log(result);
        // 赋值
        this.onlines = result.data.onlines;
      });
      // console.log(result);
    },
    //定义检索逻辑
    search(){

      console.log(this.text);

      this.$router.push({path:'/search',query:{word:this.text}});

    },
    //登出
    logout(){

      //删除localstorage
      localStorage.removeItem("username");

      //全部删除
      //localStorage.clear();

      //跳转页面
      this.username = '';
      this.$router.push('/');



    }


  }
}


</script>
 
<style>



</style>